<template>
  <div class="leftNavibar">
    <div class="currentdanger" id="currentdanger"></div>
    <div class="historydanger" id="historydanger"></div>
  </div>
  <div class="rightNavibar">
    <div class="info">
        <h2>隐患数详情</h2>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="隐患名称" width="100" />
            <el-table-column prop="people" label="巡检人" width="100" />
            <el-table-column prop="address" label="地点" />
            <el-table-column prop="state" label="状态" />
        </el-table>
    </div>
    <div class="dangerhandle">
        <h2>紧急隐患处置</h2>
        <el-table :data="dangerhandleData" style="width: 100%">
            <el-table-column prop="name" label="隐患名称" width="100" />
            <el-table-column prop="people" label="巡检人" width="100" />
            <el-table-column prop="address" label="地点" />
            <el-table-column prop="handle" label="操作" />
        </el-table>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";


let tableData = [
    {
        name:"111",
        people:"tom",
        address:"fafd",
        state:"损毁"
    }
]

let dangerhandleData = [
    {
        name:"xxxx",
        people:"tom",
        address:"dfa",
        handle:"处置"
    }

]

onMounted(() => {
  var currentdangerChart = echarts.init(document.getElementById("currentdanger"));
  currentdangerChart.setOption(createDanger("今日隐患数",[5,2,10]));

  var historydangerChart = echarts.init(document.getElementById("historydanger"));
  historydangerChart.setOption(createDanger("历史隐患数",[10,20,100]))
});

function createDanger(title,data) {
  let currentdangeroption = {
    title: {
      text: title,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "left",
      top: "10%",
    },
    series: [
      {
        name: "隐患类型",
        type: "pie",
        radius: "50%",
        data: [
          { value: data[0], name: "井盖破损" },
          { value: data[1], name: "井盖丢失" },
          { value: data[2], name: "管道堵塞" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  return currentdangeroption
}
</script>

<style scoped>
.currentdanger,
.info,
.historydanger,
.dangerhandle {
  width: 100%;
  height: 46%;
  margin-top: 10%;
}

.leftNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  left: 20px;
  z-index: 99;
  bottom: 25px;
  background-color: aliceblue;
}

.rightNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  z-index: 99;
  right: 20px;
  bottom: 25px;
  background-color: aliceblue;
}
</style>
